<template>
  <q-page class="q-pa-md">
    <!-- 顶部统计卡片 -->
    <div class="row q-col-gutter-md q-mb-md">
      <q-card class="col-md-3 col-sm-6 col-xs-12" flat bordered>
        <q-card-section>
          <div class="text-h6">总用户数</div>
          <div class="text-h4 text-primary">3,685</div>
          <div class="text-caption text-green">同比+12%</div>
        </q-card-section>
      </q-card>

      <q-card class="col-md-3 col-sm-6 col-xs-12" flat bordered>
        <q-card-section>
          <div class="text-h6">总访问量</div>
          <div class="text-h4 text-primary">8,846</div>
          <div class="text-caption text-green">同比+8%</div>
        </q-card-section>
      </q-card>

      <q-card class="col-md-3 col-sm-6 col-xs-12" flat bordered>
        <q-card-section>
          <div class="text-h6">支付笔数</div>
          <div class="text-h4 text-primary">6,560</div>
          <div class="text-caption text-green">同比+5%</div>
        </q-card-section>
      </q-card>

      <q-card class="col-md-3 col-sm-6 col-xs-12" flat bordered>
        <q-card-section>
          <div class="text-h6">总销售额</div>
          <div class="text-h4 text-primary">¥15,920</div>
          <div class="text-caption text-green">同比+10%</div>
        </q-card-section>
      </q-card>
    </div>

    <!-- 销售图表和环形图 -->
    <div class="row q-col-gutter-md q-mb-md">
      <div class="col-md-8">
        <q-card flat bordered>
          <q-card-section>
            <div class="text-h6">销售额和访问量</div>
            <v-chart class="chart" :option="salesChartOption" autoresize style="height: 300px" />
          </q-card-section>
        </q-card>
      </div>
      <div class="col-md-4">
        <q-card flat bordered>
          <q-card-section>
            <div class="text-h6">销售额类别占比</div>
            <v-chart class="chart" :option="pieChartOption" autoresize style="height: 300px" />
          </q-card-section>
        </q-card>
      </div>
    </div>

    <!-- 门店排名和热门搜索 -->
    <div class="row q-col-gutter-md">
      <div class="col-md-6">
        <q-card flat bordered>
          <q-card-section>
            <div class="text-h6">门店销售额排名</div>
            <q-table
              flat
              :rows="storeRows"
              :columns="storeColumns"
              row-key="name"
              hide-pagination
            />
          </q-card-section>
        </q-card>
      </div>
      <div class="col-md-6">
        <q-card flat bordered>
          <q-card-section>
            <div class="text-h6">线上热门搜索</div>
            <q-table
              flat
              :rows="searchRows"
              :columns="searchColumns"
              row-key="keyword"
              hide-pagination
            />
          </q-card-section>
        </q-card>
      </div>
    </div>
  </q-page>
</template>

<script lang="ts">
import { defineComponent } from 'vue';
import { use } from 'echarts/core';
import { CanvasRenderer } from 'echarts/renderers';
import { BarChart, LineChart, PieChart } from 'echarts/charts';
import {
  GridComponent,
  TooltipComponent,
  TitleComponent,
  LegendComponent,
} from 'echarts/components';
import VChart from 'vue-echarts';

use([
  CanvasRenderer,
  BarChart,
  LineChart,
  PieChart,
  GridComponent,
  TooltipComponent,
  TitleComponent,
  LegendComponent,
]);

export default defineComponent({
  name: 'DashboardPage',
  components: {
    VChart,
  },
  setup() {
    const storeColumns = [
      {
        name: 'rank',
        label: '排名',
        field: 'rank',
        align: 'center' as const,
      },
      {
        name: 'name',
        label: '门店名称',
        field: 'name',
      },
      {
        name: 'sales',
        label: '销售额',
        field: 'sales',
      },
    ];

    const storeRows = [
      { rank: 1, name: '北京朝阳店', sales: '¥3,200' },
      { rank: 2, name: '上海浦东店', sales: '¥2,980' },
      { rank: 3, name: '广州天河店', sales: '¥2,750' },
      { rank: 4, name: '深圳南山店', sales: '¥2,420' },
      { rank: 5, name: '成都锦江店', sales: '¥2,150' },
    ];

    const searchColumns = [
      {
        name: 'keyword',
        label: '关键词',
        field: 'keyword',
      },
      {
        name: 'users',
        label: '搜索用户数',
        field: 'users',
      },
      {
        name: 'growth',
        label: '周涨幅',
        field: 'growth',
      },
    ];

    const searchRows = [
      { keyword: '新款手机', users: '1,250', growth: '+12%' },
      { keyword: '笔记本电脑', users: '980', growth: '+8%' },
      { keyword: '智能手表', users: '850', growth: '+15%' },
      { keyword: '无线耳机', users: '720', growth: '+5%' },
      { keyword: '平板电脑', users: '680', growth: '+10%' },
    ];

    const salesChartOption = {
      tooltip: {
        trigger: 'axis',
        axisPointer: {
          type: 'shadow',
        },
      },
      legend: {
        data: ['销售额', '访问量'],
      },
      grid: {
        left: '3%',
        right: '4%',
        bottom: '3%',
        containLabel: true,
      },
      xAxis: {
        type: 'category',
        data: [
          '1月',
          '2月',
          '3月',
          '4月',
          '5月',
          '6月',
          '7月',
          '8月',
          '9月',
          '10月',
          '11月',
          '12月',
        ],
      },
      yAxis: {
        type: 'value',
      },
      series: [
        {
          name: '销售额',
          type: 'bar',
          barWidth: '30%',
          data: [1200, 2000, 1500, 1800, 2100, 1900, 2500, 2800, 2600, 3000, 3200, 3500],
          itemStyle: {
            color: '#1890ff',
          },
        },
        {
          name: '访问量',
          type: 'line',
          data: [800, 1200, 1000, 1500, 1800, 2000, 2200, 2500, 2300, 2800, 3000, 3200],
          itemStyle: {
            color: '#52c41a',
          },
        },
      ],
    };

    const pieChartOption = {
      tooltip: {
        trigger: 'item',
      },
      legend: {
        orient: 'vertical',
        right: 10,
        top: 'center',
      },
      series: [
        {
          name: '销售额占比',
          type: 'pie',
          radius: ['50%', '70%'],
          avoidLabelOverlap: false,
          itemStyle: {
            borderRadius: 10,
            borderColor: '#fff',
            borderWidth: 2,
          },
          label: {
            show: false,
            position: 'center',
          },
          emphasis: {
            label: {
              show: true,
              fontSize: '18',
              fontWeight: 'bold',
            },
          },
          labelLine: {
            show: false,
          },
          data: [
            { value: 1048, name: '电子产品' },
            { value: 735, name: '服装' },
            { value: 580, name: '食品' },
            { value: 484, name: '家居' },
            { value: 300, name: '其他' },
          ],
        },
      ],
    };

    return {
      storeColumns,
      storeRows,
      searchColumns,
      searchRows,
      salesChartOption,
      pieChartOption,
    };
  },
});
</script>
